<template>
	<view class="container">
		<view class="nav">
			<view class="img_box" @click="click">
			
					<image :src="scr1" ></image>
					<text>应用中心</text>
					
				
			</view>
			<view class="img_box" @click="click">
				<image :src="scr2"></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>
<script>
	
	export default {
		props:{
			option:{
				type:String,
				default:'1'
			},
			click:{
				type:Function,
				default:undefined
			}
		},
		data() {
			return {
				scr1:require('./img/modular_ed.png'),
				scr2:require('./img/usercenter.png')
			}
		},
		created:function(){
			if(this.$props.option == '1'){
				this.scr1 = require('./img/modular_ed.png')
				this.scr2 = require('./img/usercenter.png')
			}else if(this.$props.option == '2'){
				this.scr1 = require('./img/modular.png')
				this.scr2 = require('./img/usercenter_ed.png')
			}
				
			
		}
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.nav {
		display: flex;
		height: 55px;
		background-color: #f7f7f7;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border-top: .5px solid #eee;
		box-shadow: 10px 1px 8px #d0d0d0;
	}

	.nav image {
		width: 25px;
		height: 25px;
	}
	
	.img_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.img_box text {
		font-size: 12px
	}
</style>
